<template>
  <div class="findlistcontent" ref="wrapper">
      <div>
        <div class="area" v-for="(item,key) in findList2" :key="key" :ref="key">
            <h3>{{key}}</h3>
            <div class="line" v-for="brandItem in item" :key="brandItem.id">
            {{brandItem.spell}}
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'FindListContent',
  props:{
    findList2:Object,
    // 步骤五：接收letter
    letter: String,
  },
  data () {
    return {
      
      
    }
  },
   mounted(){
    // console.log(this.$refs.wrapper);
    // this.scroll=new BScroll(this.$refs.wrapper);
    this.scroll=new BScroll(this.$refs.wrapper,{
      click:true
    })
    const options = {
      click:true,
      tap:true
    }
    // this.scroll=new BScroll(this.$refs.wrapper1);
  },
  // 步骤六：监听letter
  watch: {
     letter(){
    //   console.log(this.letter)
      if(this.letter){
        // console.log(this.$refs[this.letter])
        const area=this.$refs[this.letter][0]
        // console.log(area)
        this.scroll.scrollToElement(area)
      }
     }
    }
}
</script>


<style lang="stylus" scoped>
.border-topbottom
  &::before
    border-color #ccc
  &::after
    border-color #ccc
.border-bottom
  &::before
    border-color #ccc
.findlistcontent
    width 100%
    height 5vH
    background-color #efefef
    // margin-top .1rem
    // padding-top 1rem
    position absolute
    top 1.1rem
    left -.4rem
    right 0
    bottom 0
    // overflow hidden
    .area
        width 100%
        h3  
            width 100%
            height 1rem
            line-height 1rem
            padding-left .8rem
            font-weight bold
            background #efefef
        .line
            width 100%
            height 1rem
            line-height 1rem
            font-weight bold
            padding-left .8rem
            background-color #ffffff
            border-bottom 1px solid #efefef
</style>
